<template>
  <div id="myChartPage">
    <h2>我的图表</h2>
    <div class="searchBar">
      <a-input-search
        :style="{ width: '500px', align: 'center' }"
        placeholder="快速发现图表"
        button-text="搜索"
        size="large"
        search-button
        v-model="searchValue"
        @search="doSearch"
      />
    </div>
    <a-list
      :grid-props="{ gutter: 16, sm: 24, md: 24, lg: 12, xl: 12 }"
      class="list-demo-action-layout"
      :bordered="false"
      :data="chartList"
      :pagination-props="pagination"
      @page-change="onPageChange"
    >
      <template #item="{ item }">
        <a-card>
          <a-list-item class="list-demo-item" action-layout="vertical">
            <a-list-item-meta
              :title="item.name"
              :description="
                item.chartType ? '图表类型：' + item.chartType : undefined
              "
            >
              <template #avatar>
                <a-avatar shape="square">
                  <img
                    alt="avatar"
                    :src="loginUserStore.loginUser.userAvatar"
                  />
                </a-avatar>
              </template>
            </a-list-item-meta>
            <p>分析目标：{{ item.goal }}</p>
            <div className="image-area">
              <v-chart
                :option="JSON.parse(item.genChart ?? '{}')"
                style="height: 300px; width: 500px"
              />
            </div>
          </a-list-item>
        </a-card>
      </template>
    </a-list>
  </div>
</template>

<script setup lang="ts">
import API from "@/api";
import { listChartByPageUsingPost } from "@/api/chartController";
import { onMounted, reactive, ref } from "vue";
import { Message } from "@arco-design/web-vue";
import VChart from "vue-echarts";
import "echarts";
import { useLoginUserStore } from "@/store/userStore";

const searchValue = ref("");

const searchParams = reactive<API.ChartQueryRequest>({
  current: 1,
  pageSize: 10,
});

const loginUserStore = useLoginUserStore();

const chartList = ref<API.Chart[]>([]);
const total = ref<number>(0);

const loadData = async () => {
  try {
    const res = await listChartByPageUsingPost({ ...searchParams });
    if (res.data.code === 0) {
      chartList.value = res.data.data?.records || [];
      total.value = res.data.data?.total || 0;
    } else {
      Message.error("数据获取失败" + res.data.message);
    }
  } catch (e: any) {
    Message.error("数据获取失败", e.data.message);
  }
};

onMounted(() => {
  loadData();
});

/**
 * 当分页变化时，改变搜索条件，触发数据加载
 * @param page
 */
// 分页参数
const pagination = reactive({
  defaultCurrent: 1,
  total: total,
});

// 分页变化时，改变搜索条件，触发数据加载
const onPageChange = (page: number) => {
  searchParams.current = page;
  loadData();
};

/**
 * 执行搜索
 */
const doSearch = async () => {
  searchParams.current = 1; // 重置当前页码为1
  searchParams.name = searchValue.value; // 设置搜索参数
  await loadData(); // 加载数据
};
</script>

<style scoped>
#myChartPage {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

h2 {
  text-align: center;
  font-size: 28px;
  color: #1f2d3d;
  margin-bottom: 30px;
  font-weight: 600;
  letter-spacing: 1px;
}

.searchBar {
  display: flex;
  justify-content: center;
  margin: 30px 0;
}

:deep(.arco-input-search) {
  border-radius: 25px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

:deep(.arco-input-search-button) {
  border-radius: 0 25px 25px 0 !important;
  background-color: #165dff;
  color: white;
  transition: all 0.3s;
}

:deep(.arco-input-search-button:hover) {
  background-color: #0e42d2;
}

.list-demo-action-layout {
  margin-top: 20px;
}

.arco-card {
  border-radius: 12px !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  transition: transform 0.2s, box-shadow 0.2s;
  margin-bottom: 16px;
  overflow: hidden;
}

.arco-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
}

.arco-list-item-meta-title {
  font-size: 18px;
  font-weight: 600;
  color: #1f2d3d;
  margin-bottom: 8px;
}

.arco-list-item-meta-description {
  color: #86909c;
  font-size: 14px;
}

.arco-list-item p {
  color: #4e5969;
  margin: 12px 0;
  font-size: 14px;
  line-height: 1.6;
}

.image-area {
  border-top: 1px solid #f2f3f5;
  padding-top: 16px;
  margin-top: 16px;
}

/* 图表容器响应式 */
.v-chart {
  width: 100% !important;
  height: 300px !important;
}

/* 头像样式 */
.arco-avatar {
  border: 2px solid #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

/* 分页样式 */
:deep(.arco-pagination) {
  justify-content: center;
  margin: 24px 0;
}

:deep(.arco-pagination-item-active) {
  background-color: #165dff !important;
  color: white !important;
}

/* 响应式调整 */
@media (max-width: 768px) {
  #myChartPage {
    padding: 10px;
  }

  .searchBar {
    padding: 0 10px;
  }

  :deep(.arco-input-search) {
    width: 100% !important;
  }

  .v-chart {
    height: 200px !important;
  }
}
</style>
